<template>
  <view class="selected-sku">
    <view class="content">
      <image class="pic" mode="aspectFit" :src="sku.pic_url" @click="showLargeCover" ></image>
      <view class="desc">
        <view class="price">
          
           <view class="vip">
            <view class="money">{{product.title}}</view>
					<!-- 	<image src="/static/images/vip-price-icon.png"  mode=""></image> -->
          </view>
				<!-- 	<view class="market">￥{{ sku.price }} <text></text></view> 
			<view claas= "tt-title">{{product.name}}</view> -->
					<!-- <view class="goods-red-packet">
						<view>
							<text>立得商品红包</text>
							<text>{{ sku.self_brokerage | brokerageNum }}元</text>
						</view>
					</view> -->
					
          <!-- <label-com
              label="vip_price"
              width="68" height="28"
              style="margin-top: 8rpx"
          ></label-com> -->
        </view>
				<!-- <view class="sku-brokerage" >立得<text class="sku-brokerage-num">{{ sku.self_brokerage*selectedSkuCount | brokerageNum }}</text>商品红包</view> -->
        <view class="title">
          <text>已选择：{{ sku.name }} </text>
          <text class="count"> × {{ selectedSkuCount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import store from "store";
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "ProductSelectedSkuCom",
  store,
  data: () => ({
    sku: {}
  }),
	props:{
		brokerageShow:true,
	},
  computed: {
    ...mapGetters([
		'user',
		'defaultSku',
		'selectedSku',
		'selectedSkuCount',
		'largeSkuCover',
		'product'
    ])
  },
  watch: {
    defaultSku: {
      handler(val) {
        if (!this.selectedSku) {
          this.sku = val
        }
      },
      immediate: true
    },
    selectedSku: {
      handler(val) {
        if (val) {
          this.sku = val
		
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions(['updateLargeSkuCover']),
    async showLargeCover() {
      await this.updateLargeSkuCover(this.sku.pic_url)
    }
  }
}
</script>

<style lang="scss" scoped>
.selected-sku {
	overflow: hidden;
  .content {
    display: block;
    justify-content: flex-start;
    width: 100%rpx;
    margin: 20rpx auto;
	
   
    .pic {
      width: 232rpx;
      height: 232rpx;
      margin-right: 20rpx;
	  padding-left:16rpx;
	  float:left;
    }
    .desc {
      .price {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .market {
          font-size: 28rpx;
          color: #999999;
          margin-top: 10rpx;
          margin-right: 10rpx;
					margin-left: 15rpx;
					>text{
						margin-left: 10rpx;
					}
					text-decoration: line-through;
        }
        .vip {
          font-weight: bold;
          color: #F94223;
          display: flex;
          align-items: center;
		  margin-top:50rpx;
          .unit {
            font-size: 30rpx;
            margin-top: 5rpx;
          }
          .money {
            font-size: 30rpx;
			color:#333;
			width:338rpx;
          }
        }
      }
      .title {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }
  }
}
.sku-brokerage{
	font-size: 24rpx;
	color:#AC7424;
	display: flex;
	align-items: center;
	margin-left: 0rpx;
}
.sku-brokerage-num{
	font-size: 24rpx;
	line-height: 24rpx;
	font-weight: 500;
	color: #FE0000;
	margin:0 5rpx;
}

.goods-red-packet{
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		>view:nth-child(1){
			display: flex;
			align-items: center;
			min-width: 228rpx;
			padding: 0 10rpx;
			height: 48rpx;
			background: linear-gradient(90deg, #FDE1F3 0%, #FFF5ED 100%);
			border-radius: 8rpx;
			>text:nth-child(1){
				font-size: 24rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4924;
				margin-right:5rpx;
			}
			>text:nth-child(2){
				font-size: 24rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4924;
			}
		}
	}

</style>
